<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/admin-v2.css">
</head>

<body>
    <div class="top-wrapper">
        <h3 style="color:#4f5357;font-size: 24px;">文章
            <span>
                <a href="admin-v1.html">写文章</a>
            </span>
        </h3>
        <div class="article-search">
            <div class="article-search-left fl">
                <span>全部(
                    <i></i>)</span>
                <span style="color: #9eddf1;">已发布(
                    <i></i>)</span>
            </div>
            <div class="article-search-right fr">
                <input type="text" id="search">
                <button id="search-article">搜索文章</button>
            </div>
        </div>
        <div class="handle">
            <select name="" id="handle-xiugai" value="">
                <option value="">批量操作</option>
                <option value="">编辑</option>
                <option value="">移至回收站</option>
            </select>
            <button id="handle-xiugai-v">应用</button>
            <select name="" id="handle-time">
                <option value="">全部日期</option>
                <option value="">2018年3月</option>

            </select>
            <select name="" id="handle-fenlei">
                <option value="">所有项目分类</option>
                <option value="">日记</option>       
                <option value="">心情</option>
                <option value="">想法</option>
                <option value="">随手记</option>
                <option value="">灵感爆炸</option>

            </select>
            <button id="handle-fenlei-v">筛选</button>
        </div>
        <div class="article-list">
            <table>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="checked">
                            <span style="color: #0073aa;">标题</span>
                        </th>
                        <th>作者</th>
                        <th>分类目录</th>
                        <th>标签</th>
                        <th>评论</th>
                        <th>
                            <span style="color: #0073aa;">日期</span>
                        </th>

                    </tr>
                </thead>
                <tbody>
                </tbody>

            </table>

        </div>
    </div>
</body>

</html>
<script src="./js/jquery.js"></script>
<script src="./js/reback.js"></script>
<script>
    $(function () {
        $.ajax({
            type: "POST",
            url: "http://localhost:5656/admin-v2",
        }).then(function (res) {
            var arr = [];
            //增加了一个判断,判断article_status=1的文章才可以写入
            for (var j = 0; j < res.length; j++) {
                if (res[j].article_status === "1") {
                    arr.push(res[j]);
                }
            }
            for (var i = 0; i < arr.length; i++) {
                var str = `  <tr>
                        <td style="position:relative;">
                            <input type="checkbox">
                            <span id="article_title" style="color:#0073aa; ">${arr[i].article_title}</span>
                            <div class="operate"  style="position:absolute;display:none;bottom:3px;">
                                <button class="del" style="color:#0073aa;padding: 5px 10px;margin-top: 10px;border: none;background:#f3f3f4;">删除</button>
            <button id="rewrite" style="color:#0073aa;padding: 5px 10px;margin-top: 10px;border: none;background:#f3f3f4;">编辑</button></div>
                        </td>
                        <td>
                            <span style="color:#0073aa;">${arr[i].a_id}</span>
                        </td>
                        <td>
                            <span style="color:#0073aa;">${arr[i].article_class}</span>
                        </td>
                        <td>
                            <span style="color:#0073aa;">mmp</span>
                        </td>
                        <td>
                            <span style="color:#0073aa;">mmp</span>
                        </td>
                        <td>
                            <span style="color:#0073aa;">${arr[i].article_time}</span>
                        </td>
                    </tr> `;

                //给文章动态生成内容
                $("tbody").html($("tbody").html() + str);
                $(".operate").siblings("span").on("mouseenter", function () {
                    $(this).siblings(".operate").show(200);
                    $(this).siblings(".operate").on("mouseenter", function () {
                        $(this).show();
                    }).on("mouseleave", function () {
                        $(this).hide();
                    })
                }).on("mouseleave", function () {
                    $(this).siblings(".operate").hide();
                })



            }

            //利用target绑定,执行垃圾箱的删除操作
            var $del = $(".del");
            $(".article-list").on("click", function (e) {

                var params = $(e.target).parents("div").parents("td").find("span").text();
                // var params = $(this).children("span").text();
                console.log(params); 
                del(params);
            })
            $(".del").on("click", function () {
                $(this).parents("tr").remove();
            })

            //checkbox的复选情况
            $("#checked").on("click", function () {
                $("[type=checkbox]").prop("checked", $(this).prop("checked"));
            })
        
            var $inps = $("[type=checkbox]");
            var count = 0;
            for (var i = 0; i < $inps.length; i++) {
                $($inps[i]).on("click", function () {
                    if ($(this).prop("checked")) {
                        count++;
                    }
                    console.log(count,$inps.length);
                    if(count === ($inps.length-1)){
                        $("#checked").prop("checked",true);
                    }  
                })
            }
           $("#handle-xiugai-v").on("click",function(){
               console.log($("#handle-xiugai").val());
           })
           console.log($("#handle-xiugai").val());
        })


    })
</script>